{% extends "base.html" %}
{% load thumbnail %}

{% block style %}
    <link rel="stylesheet" type="text/css" href="/static_media/css/user/excursion.css">    
{% endblock style %}

{% block script %}
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBHPN4aDb1OTOiMkDGZcuRJd4cFd-ceXds&sensor=false"></script>
    <script type="text/javascript">
		function init()
		{
			var blueIcon = {
				url:"/static_media/images/pin_blue.png",
				size: new google.maps.Size(34, 55),
				origin: new google.maps.Point(0, 0),
				anchor: new google.maps.Point(17, 51)
			}
			
			var mapOptions = {
			  //center map on the UK
			  center: new google.maps.LatLng(54.6, -2.46),
			  zoom: 5,
			  mapTypeId: google.maps.MapTypeId.ROADMAP
			};
							
			var map = new google.maps.Map(document.getElementById("map"), mapOptions);
			
			{% if outcrop_list %}
			{% with outcrop_list|first as first_object %}
			map.setCenter(new google.maps.LatLng({{ first_object.latitude }}, {{ first_object.longitude }}))
			{% endwith %}
			{% endif %}
			
			var positionArray = new Array();
			var markerArray = new Array();
			var titleArray = new Array();
			var urlArray = new Array();
			
			{% for outcrop in outcrop_list %}
			positionArray.push( new google.maps.LatLng({{outcrop.latitude}}, {{outcrop.longitude}}));
			titleArray.push("{{outcrop.name}}");
			urlArray.push("/outcrop/{{outcrop.pk}}/");
			{% endfor %}
			
			for (i=0; i<positionArray.length; i++)
			{
				markerArray.push( new google.maps.Marker({ position: positionArray[i], map: map, title: titleArray[i], icon:blueIcon, url: urlArray[i] }) );
				
				google.maps.event.addListener(markerArray[i], 'click', function(event) {
					window.location.href = this.url
				});
			}
		}
    </script>
{% endblock script %}

{% block content %}
			{% if isAdmin %}
			<div class="item">
				<div id="settingsBar"> <a href="/user/excursion/edit/{{ excursionItem.pk }}/">Excursion Settings</a> </div>
			</div>
			{% endif %}
			<div class="item">
				<div class="itemHeading"> {{ excursionItem.name }} </div>
				<div id="map"> </div>
				<div class="mapItem">
					<div id="leftMapItem">
						<div class="itemSmallHeading">Description</div>
						{% if excursionItem.description %}
							<p> {{ excursionItem.description|linebreaksbr }} </p>
						{% else %}
							No description has been added to this excursion.
						{% endif %}
					</div>
					<div id="rightMapItem">
						<div class="itemSmallHeading">Outcrops</div>
						<ul>
						{% if outcrop_list  %}
							{% for outcrop in outcrop_list %}
							<div class="fieldWrapper">
								<li> <a href="/outcrop/{{ outcrop.pk }}/{{excursionItem.pk}}/"> {{ outcrop.name }} </a> </li>
							</div>
							{% endfor %}
						{% else %}
							No outcrops have been added to this excursion.
						{% endif %}
						</ul>
					</div>
				</div>
			</div>
			<div class="item">
				<div class="itemHeading"> Images </div>
				<div class="images"> 
				{% if images %}
					{% for image in images %}
						<div class="imageItem">
							<a href="/user/excursion/{{ excursionItem.pk }}/images/{{ image.pk }}/0/">
								<img src="{{ image.image.thumb.url }}" alt="{{ image.name }}" class="image"/>
							</a>
						</div>
					{% endfor %}
				{% else %}
					<div id="imageInfo"> No images have been uploaded to this excursion.</div>
				{%endif%}
				</div>
			</div>
			<!-- end .right --> 
{% endblock content %}
